<template>
  <div>
    1
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
// 组件会在 `组件名` 改变时改变
// <component :is="组件名变量"></component>
// 只要在data里弄个变量，给变量赋值就能动态的切换组件。

import ComponentA from '../components/ComponentA.vue'
import ComponentB from '../components/ComponentB.vue'
export default {
  data() {
    return {
      currentComponent: 'B',
    }
  },
  components: {
    // A: {
    //   template: '<div>Component A</div>',
    // },
    // B: {
    //   template: '<div>Component B</div>',
    // },
    A: ComponentA,
    B: ComponentB,
  },
}
</script>

<style lang="scss" scoped></style>
